<template>
  <div class="chart-box">
    <div style="padding-left: 5%;width: 1670px">
      <el-row :gutter="20">
        <el-col :span="6">
          <div style="font-weight: bold;font-size: 24px;color: #000;padding-top: 5px">Continental</div>
        </el-col>
        <el-col :span="2" :offset="4">
          <div style="color:#D60B0B;font-weight: bold;padding-top: 15px">{{radioTime}}</div>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-radio-group style="" size="medium" v-model="radioTime" @change="radioChange">
            <el-radio-button label="10min"/>
            <el-radio-button label="1h"/>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>
    <HomeChart ref="chart" v-loading="load" element-loading-text="loading"/>
    <div class="text_div"><h1>Comprehensive evaluation of electric energy consumption</h1></div>
    <el-row :gutter="20" class="row" >
      <el-col :span="8" class="piebox">
        <!--圆形表-->
        <PieChart class="PieChart" ref="oneChart"/>
      </el-col>
      <el-col :span="8" class="piebox">
        <!--圆形表-->
        <PieChart id="twoChart" ref="twoChart" class="PieChart"/>
      </el-col>
      <el-col :span="8" class="piebox">
        <!--圆形表-->
        <PieChart id="threeChart" ref="threeChart" class="PieChart"/>
      </el-col>
    </el-row>
  </div>
  <!-- <div> -->
    <!-- <div id="chart1" style="height:600px;"></div> -->
  <!-- </div> -->

</template>

<script>
// import * as echarts from 'echarts'
import HomeChart from '../../components/charts/HomeChart'
import PieChart from '../../components/charts/PieChart'
import { findHomeStatistics, totalEnergy } from '@/api/tenergy.js'
export default {
  data () {
    return {
      load: true,
      radioTime: '10min',
      radioValue: 1,
      chartData: [53425, 93219],
      chartValue: [],
      pieData: {},
      pieSeriesData: [],
      twopieSeriesData: [],
      threepieSeriesData: [],
      NameData: [],
      twoNameData: [],
      threeNameData: [],
      oneData: {},
      twoData: {},
      threeData: {}
    }
  },
  name: 'home',
  components: { HomeChart, PieChart },
  mounted () {
    this.reqStatistics()
    this.requestLineData(1)
    this.requestDeviceList()
    // this.makeEcharts()
  },
  methods: {
    async reqStatistics () {
      try {
        const res = await findHomeStatistics()
        console.log('请求首页数据成功')
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    radioChange () { // 1H 和 10min切换方法
      this.radioValue = this.radioTime === '10min' ? 1 : 2 // 1为10min，2为1H
      this.requestLineData(this.radioValue)
    },
    async requestLineData (type) {
      try {
        const res = await totalEnergy(type)
        console.log(res)
        this.chartValue = []
        let arrLength = res.data.length
        for (let i = 0; i < arrLength; i++) {
          this.chartValue.push(res.data[i].yValue)
        }
        this.$refs.chart.refresh(this.radioValue, this.chartValue)
        // this.pieData.legendData = ['A区', 'B区']
        // this.pieData.seriesData = [88787384, 28978734]
        // this.$refs.pieChart.setOption(this.pieData)
        // 渲染图表
        this.load = false
      } catch (error) {
        console.log(error)
      }
    },
    async requestDeviceList () {
      try {
        const { data } = await findHomeStatistics()
        console.log(data)
        // 昨日与今日数据对比
        for (let i = 0; i < 2; i++) {
          this.NameData.push(data[i].energyName)
          this.pieSeriesData.push({ value: 0, name: data[i].energyName }) // 饼状图数据拼接
          this.pieSeriesData[i].value = data[i].totalValue
        }
        this.oneData.legendData = this.NameData
        this.oneData.seriesData = this.pieSeriesData
        console.log(this.oneData)
        console.log(this.twoData)

        this.$refs.oneChart.setOption(this.oneData)
        // 上个月与这个月数据对比
        this.NameData = []
        this.pieSeriesData = []
        for (var b = 2; b < 4; b++) {
          this.NameData.push(data[b].energyName)
          this.pieSeriesData.push({ value: 0, name: data[b].energyName }) // 饼状图数据拼接
          this.pieSeriesData[b - 2].value = data[b].totalValue
        }
        this.twoData.legendData = this.NameData
        this.twoData.seriesData = this.pieSeriesData
        console.log(this.twoData)
        this.$refs.twoChart.setOption(this.twoData)
        // 上个月与这个月数据对比结束
        // 去年与今年数据对比
        this.NameData = []
        this.pieSeriesData = []
        for (var c = 4; c < 6; c++) {
          this.NameData.push(data[c].energyName)
          this.pieSeriesData.push({ value: 0, name: data[c].energyName }) // 饼状图数据拼接
          this.pieSeriesData[c - 4].value = data[c].totalValue
        }
        this.threeData.legendData = this.NameData
        this.threeData.seriesData = this.pieSeriesData
        this.$refs.threeChart.setOption(this.threeData)
        // 去年与今年数据对比结束
      } catch {
        console.log(111)
      }
    }
  }
}
</script>

<style lang="less">
  .chart-box{
    overflow: auto;
    height: calc(100vh - 105px);
    padding-top: 20px;
  }
  .text_div {
    width:1670px;
    text-align: center;
  }
  .row {
    width: 1670px;
    padding-left: 200px;
    // background-color: pink;
  }
  .piebox{
    // border: 1px solid #ccc;
  }
  h1{
    font-size: 2em;
    margin: .67em 0;
  }
  .PieChart{
    width: 300px;
    height: 150px;
  }
  // #chart_example{
  //   width: 50%;
  //   height: 500px;
  //   border: 1px solid red;
  //   margin: 0 auto;
  // }
</style>
